
<template>
   <div class="content">
      <div class="cont1">
          <div class="header">订单详情</div>
          <div class="cont1_1">
            <span>收件人姓名：{{data.order.name}}</span>
            <span>收件人电话：{{data.order.phone}}</span>
            <span>收件地址：{{data.order.address}}</span>
            <span>订单编号：{{data.order.orderNum}}</span>
          </div>
      </div>
      <div class="cont2">
        <div class="header">商品详情</div>
        <div class="cont2_1">
          <img :src="data.goods.src" alt="">
        <div class="goods">
          <span>商品名称： {{data.goods.name}}</span>
          <span>规格： {{data.goods.size}}</span>
          <span>颜色： {{data.goods.color}}</span>
          <span>数量： {{data.goods.count}}</span>
          <span>单价： ￥{{data.goods.price}}</span>
          <span>积分： {{data.goods.jifen}}</span>
        </div>
      </div>
      </div>
      <div class="cont3">
        <div class="header">发货设置</div>
        <div class="form">
          <el-form :inline="true" :model="data.formInline" class="demo-form-inline">
            <el-form-item >
              <el-select v-model="data.formInline.value" placeholder="选择物流公司">
                <el-option
                    v-for="item in data.formInline.courier"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="data.formInline.orderNum" placeholder="填写运单号"  />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="ensure" >确定发货</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
  </div>
</template>
<script setup>
import { reactive} from 'vue';
  // 生命周期，创建页面完成时渲染数据

    const data = reactive({
      order:{name:'张三',phone:'13408756789',address:'成都市 武侯区',orderNum:'987654356434'},
      goods:{src:'http://rchqfbdix.hn-bkt.clouddn.com/1111.jpg',name:'张三',size:'规格一',color:'red',count: '1',price:'98',jifen:'1234'},
      formInline:{orderNum: '',value:'',status:'已发货', courier:[{id:1,name:'EMS'},{id:2,name:'顺丰快递'},{id:3,name:'京东'}]}
    })
    // 点击确认发货
    const ensure = ()=>{
      // 拿到表单数据
      console.log(data.formInline);
      // 向后台发起请求发货，修改订单状态

    // 请求成功以后清空表单

    }
</script>

<style scoped >

.content{
  background-color: white;
  padding: 0 2rem;
  font-size: 1.2rem;
  box-sizing: border-box;
}
.header{
  height: 3rem;
  line-height: 3rem;
  background-color: #79bffd;
  color: white;
  padding: 0rem 1rem;
  box-sizing: border-box;
  /* background-color: rgb(220, 229, 230) ; */
}

.cont1{
  margin: 0;
  width: 100%;
}
.cont1_1{ 
  padding: 1rem 2rem;
  line-height: 2.5rem;
  background-color: rgb(251, 253, 252);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
  font-size: 1.0rem;
}
.cont2_1{
  background-color: rgb(251, 253, 252);
  display: flex;
  padding: 0.5rem;
  box-sizing: border-box;
}
img{ 
  width: 15rem;
  height: 15rem;
}
  .goods{
    display: flex;
    flex-direction: column;
    line-height: 2.3rem;
    padding-left: 2rem;
    padding-top: 1rem;
    font-size: 1.0rem;
    box-sizing: border-box;
  }
  .form {
    padding-top: 2rem;
    box-sizing: border-box;
    background-color: rgb(251, 253, 252);
    margin-bottom: 5rem;
  }
  .el-form {
    display: flex;
    justify-content: space-around;
  }
      
  .el-main{
      overflow: visible;
  }
</style>
